<template>
  <el-form-item label="频道：">
    <el-select :value="value" placeholder="请选择" clearable
      @change="changeChannel"
    >
      <el-option
        v-for="item in channelOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: 'MyChannel',
  props: ['value'], // 父组件传过来的参数，channel_id
  data () {
    return {
      channelOptions: {}
    }
  },
  created () {
    this.getChannelOptions()
  },
  methods: {
    // 获取频道选项
    async getChannelOptions () {
      const res = await this.$http.get('v1_0/channels')
      this.channelOptions = res.data.data.channels
    },

    changeChannel (changedChannelId) {
      // 通知父组件，频道ID已变化，你也需要改变
      this.$emit('input', changedChannelId)
    }
  }
}
</script>

<style>

</style>
